<template>
  <div class="content" :class="{'vipContent': user && user.level && $appName === 'eosNewdex', 'Influencer': user && user.ambassadorType}">
    <div class="mainView">
      <!-- 面包屑 -->
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="topUrl">
        <el-breadcrumb-item>{{$t('myWallet.myWallet')}}</el-breadcrumb-item>
      </el-breadcrumb> -->

      <!-- 我的钱包内容 -->
      <div>
        <div class="box">
          <!-- 账户信息 -->
          <div class="topInfo" :style="$appName === 'tronNewdex' ? 'min-height: 230px' : ''">
            <!-- eos账户 -->
            <div class="pb0 memberIcon flex" v-if="$appName === 'eosNewdex'">
              <el-popover
                placement="bottom"
                trigger="hover"
                v-if="user && user.ambassadorType">
                <div class="newdexTip flexb">
                  <div class="newdexImg">
                    <img src="@/assets/img/member/icon.png" alt="">
                  </div>
                  <div>
                    <p style="font-size: 16px;">{{ $t('wallet.newdexForm') }}</p>
                    <p style="color: #999; margin-top: 5px; font-size: 14px;">{{ $t('wallet.joinDate') }}{{ user && user.joinTime | dateFormat}}</p>
                  </div>
                </div>
                <div slot="reference" style="cursor: pointer; padding: 0; margin-right: 5px;">
                  <img width="40" src="@/assets/img/member/icon.png" alt="">
                </div>
              </el-popover>
              <span class="icon flexc" @click="handleToNavView('member')" style="cursor: pointer;">
                <img v-if="user && user.level"
                :src="handleGetVipLogo()" alt="">
                <i v-else class="iconfont icon-v gray" style="font-size: 18px;"></i>
              </span>
              <span class="title" style="margin: 10px 0px 10px 5px;">
                <span class="account" v-if="scatter && scatter.identity">
                  {{ scatter.identity.accounts[0].name }}
                </span>
              </span>
              <!-- 资金记录 -->
              <a class="capitalRecord ml10" :href="jumpHref" target="_blank">{{ $t('public.record') }} ></a>
            </div>
            <!-- tron账户 -->
            <div class="pb0 memberIcon flex"
              v-if="$appName === 'tronNewdex' && scatter && scatter.identity">
              <!-- 已设置用户名 -->
              <span v-if="scatter.labelName"
              class="account" style="font-size: 16px;">
                {{scatter.labelName}}
                <span style="font-size: 13px;">({{scatter.identity.accounts[0].nameFormat}})</span>
              </span>
              <!-- 未设置用户名 -->
              <span v-if="!scatter.labelName" class="account" style="font-size: 16px;">{{scatter.identity.accounts[0].nameFormat}}</span>
              <i class="iconfont icon-fuzhi ml5 mr"
                  v-clipboard:copy="scatter.identity.accounts[0].name"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  style="cursor: pointer; font-size: 14px;"></i>
              <span v-if="!scatter.labelName"
              @click="handleSetAccount" style="cursor: pointer;" class="colorThis">{{$t('tronExchange.setAccountName')}}</span>
              <!-- 资金记录 -->
              <a class="capitalRecord ml10" :href="jumpHref" target="_blank">{{ $t('public.record') }} ></a>
            </div>
            <!-- 当前总估值 -->
            <div class="tip pt0">{{$t('myWallet.nowAllCount')}}</div>
            <div class="sum">
              <span class="money-eos">
                <span v-if="scatter && chain">
                  {{ handleToFixed(Number(totalValuation), 4) }}
                  {{ handleGuzhiForMat() }}
                </span>
              </span>
              <span class="money-right" v-if="chain === 'tron'">
                / {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy['TRX'] *
                Number(totalValuation))).toFixed(2)}}
              </span>
              <span class="money-right" v-else>
                / {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[handleGuzhiForMat()] *
                Number(totalValuation))).toFixed(2)}}
              </span>
            </div>
            <!-- 资源数据 -->
            <div class="VariousBalance">
              <eos-resource :symbol-science="symbolScience" v-if="$appName === 'eosNewdex'" />
              <tron-resource v-if="$appName === 'tronNewdex'"/>
            </div>
          </div>
          <!-- 会员图片 -->
          <div class="bannerImg" v-if="$appName === 'eosNewdex'">
            <img :src="vipImageUrl" alt="banner" @click="$router.push('/member');">
          </div>
        </div>

        <!-- 钱包内页入口 -->
        <div class="roterView mt">
          <div class="flexb router-nav" style="padding: 10px 20px;">
            <div class="flex">
              <template v-for="(nav, index) in navlist">
                <div class="flex navside"
                :style="nav.label === 'assetCenter' ? 'padding-right: 15px;' : ''"
                :key="index"
                @click="handleToNavView(nav.name)"
                :class="{'active' : nav.name === $route.name || (nav.name === 'services' && $route.meta.services)}"
                v-if="nav.isShow">
                  <span><i :class="['iconfont mr5', nav.icon]"></i>{{$t(`ndxStake.${nav.label}`)}}</span>
                  <i v-if="nav.label === 'assetCenter'" class="questionMark">
                    <el-tooltip placement="top" effect="light" class="markTooltip">
                      <div slot="content" style="cursor: pointer; font-size: 14px; color: #999;">
                          {{$t('public.fewMins')}}
                      </div>
                      <i class="iconfont icon-huaban"></i>
                    </el-tooltip>
                  </i>
                </div>
              </template>
            </div>
          </div>
          <router-view
          :coin-config="coinConfig"
          :eos-balance="eosBalance"
          :coin-info-list="coinInfoList"
          :symbol-science="symbolScience"
          :myStakeNdxALL="myStakeNdxALL"
          :selfStaked="selfStaked"
          @listenToCoinList="handleForCoinList"/>
        </div>
      </div>
    </div>
    <!-- tron设置账户名 -->
    <el-dialog
      class="setAccountNameDialog"
      :visible.sync="setAccountVisible"
      width="450px"
      center
      :title="$t('tronExchange.setAccountName')"
      :close-on-click-modal="false">
      <set-account-name
      @lisenSetAccount="lisenSetAccount"
      :setAccountVisible="setAccountVisible"/>
    </el-dialog>
  </div>
</template>

<script>

// 组件
import moment from 'moment';
import axios from 'axios';
// EOS 账户文件
import { EosModel } from '@/utils/eos';
// 公用js
import { toFixed, toNonExponential, guzhiForMat, getReqUrl, GetChainHref } from '@/utils/validate';
import { walletsLogo, vipLogo } from '@/utils/wallet';
import VueReceivables from '@/views/myWallet/components/VueReceivables'; // 收款
import VueCoinList from '@/views/myWallet/components/VueCoinList'; // 资产详情
import EosResource from '@/views/myWallet/eosResource/Index'; // eos资源
import TronResource from '@/views/myWallet/tronResource/Index'; // tron带宽能量
import SetAccountName from '@/views/myWallet/tronResource/SetAccountName'; // tron设置账户名

export default {
  data() {
    return {
      scatter: null,
      user: null,
      totalValuation: 0, // 当前总估值
      // coinDetail 资产详情
      coinDetail: {
        account: '',
        list: []
      },
      eosBalance: '0.0000 EOS', // EOS余额
      showInfo: false, // 显示eos基本信息
      showLV: false, // 会员登记信息dialog
      showImportEOS: false, // 导入EOS账户
      showPwd: false, // 输入密码

      accountType: false, // 账户上锁状态
      loading: true, // loading
      coinInfoList: [], // 列表使用
      timerBlance: true, // 余额获取开/关
      symbolScience: 'EOS', // 环境不同之需求
      // 菜单
      navlist: [
        {
          name: 'vueCoinList',
          label: 'assetCenter',
          icon: 'icon-zichan',
          isShow: true
        },
      ],
      historyList: [], // 搜索框历史记录
      serachShow: false, // 是否显示搜索框
      coinConfig: { // 资产参数传递
        sortName: 0, // 下拉选中值 2非小额
        searched: '', // 搜索值
      },
      historyVisible: false, // 历史搜索显示
      isClick: true, // 避免重复点击
      chain: 'eos',
      vipImageUrl: '', // 会员banner图
      rexPrice: 0, // 当前rex价格
      rexPriceFormat: 0, // 格式化价格
      rexBalance: 0, // 余额
      canBuyRexNum: 0,
      myStakeNdxALL: 0,
      selfStaked: 0, // 自己抵押自己的值
      setAccountVisible: false, // 设置波场账户名
      coinListForTron: [],
      coinListForEos: [],
      jumpHref: '', // 资金记录跳转链接
    };
  },
  computed: {
    handleClass() {
      return !this.historyList.length ? 'noIcon historyData' : 'historyData'
    },
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        this.scatter = this.$store.state.app.scatter;
        if (val && this.$appName === 'tronNewdex') {
          this.handleGetCoinInfoList();
          return;
        }
        if (val) {
          // setTimeout(() => {
          //   window.location.reload();
          // }, 500)
          this.handleMounted();
        }
        // if (val) {
        //   this.handleGetInfo();
        //   this.handleGetStakexInfo();
        //   return;
        // }
        // this.$router.push('/');
      },
      deep: true,
    },
    '$route.name': function change(val) {
      this.serachShow = false;
      if (val === 'vueCoinList') {
        this.serachShow = true;
        this.handleGetCoinInfoList();
      }
    },
    '$store.state.app.accountRes': function change() {
      this.handleGetInfo();
    },
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
      this.handleGetStakexInfo();
      this.handleGetMemberImg();
    },
    '$store.state.app.language': function change() {
      this.handleGetMemberImg();
    },
  },
  components: {
    VueReceivables, // 收款组件
    VueCoinList, // coinList
    EosResource, // eos资源
    TronResource, // tron带宽能量
    SetAccountName, // tron设置账户名
  },
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    this.handleEnvcreated();
  },
  mounted() {
    this.handleMounted();
  },
  beforeDestroy() {
    this.timerBlance = false;
  },
  methods: {
    handleMounted() {
      // 获取banner图片
      this.handleGetMemberImg();
      // 交易环境
      this.handleExchangeScience();
      const sapp = this.$store.state.app;
      const scat = sapp.scatter;
      if (scat && !scat.identity) {
        this.$router.push('/');
        return;
      }
      this.scatter = scat
      this.chain = scat.chain || 'eos';
      this.user = sapp.accountInfo;
      const historyData = localStorage.getItem('historyData');
      this.historyList = historyData ? JSON.parse(historyData) : [];
      if (this.$route.name === 'vueCoinList') {
        this.serachShow = true;
      }
      this.handleGetCoinInfoList();
      if (this.chain === 'eos') {
        this.handleGetStakexInfo();
      }
      this.handleHref();
    },
    handleEnvcreated() {
      if (this.$appName === 'eosNewdex') {
        // 菜单
        this.navlist.push(...[
          {
            name: 'member',
            label: 'memberTq',
            icon: 'icon-huiyuantequan1',
            isShow: true
          },
          {
            name: 'services',
            label: 'memberSevice1',
            icon: 'icon-huiyuanfuwu',
            isShow: true
          },
        ]);
      }
    },
    // EOS 余额列表
    handleGetCoinInfoList() {
      // 获取账户余额、汇率等信息
      this.handleGetAccountBalance((cd, r) => {
        if (cd !== 0) return;
        const coinList = r.coinList;
        this.coinListForEos = JSON.stringify(coinList);
        this.coinListForTron = JSON.stringify(coinList);
        if (this.chain === 'eos') {
          const rexItem = {
            chainPrice: 0,
            code: 'REX',
            coinDecimal: 4,
            coinId: 0,
            contract: 'eosio',
            cusdEnable: 0,
            eusdEnable: 0,
            usdtEnable: 0,
            freezeCount: 0,
            gotoTrade: [
              {
                symbolId: -1,
                symbol: 'eosio-rex-eos'
              }
            ],
            name: 'REX',
            sort: 0,
          }
          coinList.splice(1, 0, rexItem);
        }
        const eosPrice = r.eosPrice || 0;
        const cusdPrice = r.cusdPrice || 0;
        const eusdPrice = r.eusdPrice || 0;
        const usdtPrice = r.usdtPrice || 0;
        this.handleReturnByChain(this.chain).then((res) => {
          if (!res) return;
          const balances = new Map();
          res.forEach((v) => {
            const key = `${v.contract}-${v.currency}`.toLowerCase();
            balances.set(key, v);
          })
          const cList = [];
          this.totalValuation = 0; // 当前总估值
          coinList.forEach((v, index) => {
            try {
              const key = `${v.contract}-${v.code}`.toLowerCase();
              const hasItem = balances.get(key);
              const amount = hasItem ? hasItem.amount : toFixed(0, v.coinDecimal);
              // 余额 + 冻结
              const allMoney = hasItem ? Number(hasItem.amount) + Number(v.freezeCount) : Number(v.freezeCount);
              const eosValuation =
              hasItem ? toFixed(toNonExponential(allMoney * Number(v.chainPrice) * Number(eosPrice)), 4) : toFixed(0, v.coinDecimal);
              const cjValuation = toNonExponential(allMoney * Number(v.chainPrice));
              const chainTotalValuation = toFixed(cjValuation, 4);
              const cusdValuation = toFixed(toNonExponential(allMoney * Number(v.chainPrice) * Number(cusdPrice)), 2);
              const eusdValuation = toFixed(toNonExponential(allMoney * Number(v.chainPrice) * Number(eusdPrice)) || 0, 4);
              const usdtValuation = toFixed(toNonExponential(allMoney * Number(v.chainPrice) * Number(usdtPrice)) || 0, 4);
              // console.log(allMoney, Number(v.chainPrice), cjValuation);
              const item = {
                code: v.code, // 币种
                coinId: index,
                contract: v.contract, // 合约名称
                chainTotalValuation, // 当前链的估值
                eosValuation, // eos 估值
                cusdValuation, // cusd 估值
                eusdValuation, // eusd 估值
                usdtValuation, // usdt 估值
                freezeCount: toFixed(Number(v.freezeCount), v.coinDecimal), // 冻结
                gotoTrade: v.gotoTrade, // 去交易的币种
                imageUrl: `https://ndi.340wan.com/image/${key}.png`,
                name: v.name,
                // ndxValuation: null,
                // symbolId: null,
                // usableChainValuation: null,
                usableCount: toFixed(toNonExponential(Number(amount)), v.coinDecimal), // 余额
                usableEosValuation: toFixed(toNonExponential(Number(amount) * Number(v.chainPrice)), 4), // 可用EOS估值
                cusdEnable: v.cusdEnable,
                eusdEnable: v.eusdEnable,
                usdtEnable: v.usdtEnable,
                chainPrice: v.chainPrice,
                coinDecimal: v.coinDecimal,
              }
              this.totalValuation += Number(chainTotalValuation);
              cList.push(item);
            } catch (error) {
              console.log(error); // eslint-disable-line
            }
          });
          this.coinInfoList = cList;
          if (this.chain === 'eos' && this.$appName === 'eosNewdex') {
            this.handleGetRexInfo();
          }
        })
      })
    },

    async handleReturnByChain(val) {
      if (val === 'tron') {
        const balances = [];
        const coinListForTron = JSON.parse(this.coinListForTron);
        coinListForTron.forEach((v) => {
          const item = {
            amount: 0,
            contract: v.contract,
            currency: v.code,
            decimals: v.coinDecimal,
          }
          balances.push(item);
        });
        return balances;
      }
      let chain = val;
      if (chain !== 'eos') {
        chain = 'other';
      }
      const env = process.env.NODE_ENV;
      let back = false
      if (env === 'development' || chain === 'other') {
        back = await this.$http.post('/accountCoin/getSideChainBalanceForXeos').then((res) => {
          if (res.code !== 0) return false;
          return res.balances;
        });
      } else {
        back = await this.$http.post('/accountCoin/getBalances').then((res) => {
          if (res.code !== 0) return false;
          return res.balances;
        });
      }
      return back;
    },

    // 获取账户余额、汇率等信息
    handleGetAccountBalance(callback) {
      this.$http.post('/accountCoin/getAccountBalance').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        // 排序
        // res.coinList.sort((a, b) => {
        //   const st = b.code < a.code ? 1 : -1;
        //   return st
        // });
        callback(0, res);
      });
    },

    // 获取REX 余额/ 冻结/ 价格
    handleGetRexInfo() {
      EosModel.getRexBlance((result) => {
        const row = result.rows;
        if (row && !row.length) {
          this.rexBalance = '0.0000 REX';
          this.canBuyRexNum = '0.0000';
        } else {
          this.rexBalance = row[0].rex_balance;
          const rexMaturities = row[0].rex_maturities;
          this.canBuyRexNum = 0;
          rexMaturities.forEach((v) => {
            const zone = moment().zone() / 60; // 时区
            const jsTime = moment(v.first).add(0 - zone, 'hours').format('YYYY/MM/DD HH:mm:ss'); // 解锁时间
            const jsBdTime = new Date(jsTime).getTime();
            const bdTime = new Date().getTime();
            const flg = bdTime - jsBdTime >= 0;
            if (flg) {
              this.canBuyRexNum += Number(v.second);
            }
          });
          this.canBuyRexNum += Number(row[0].matured_rex);
          this.canBuyRexNum = toFixed(this.canBuyRexNum / 10000, 4);

          // 获取rex全网信息
          EosModel.getRexTableRows((r) => {
            if (r.code) return;
            const pr = parseFloat(r.total_lendable, 0) / parseFloat(r.total_rex, 0);
            this.rexPrice = toNonExponential(pr);
            this.rexPriceFormat = (Number(toNonExponential(pr))).toFixed(11);
            // this.coinInfoList
            const rexBalance = parseFloat(this.rexBalance, 0);
            const amount = Number(this.canBuyRexNum);
            const eosValuation = toFixed(toNonExponential(rexBalance * Number(this.rexPrice)), 4);
            const item = {
              code: 'REX', // 币种
              coinId: this.coinInfoList.length,
              contract: 'eosio', // 合约名称
              chainTotalValuation: eosValuation, // 当前链的估值
              eosValuation, // eos 估值
              cusdValuation: 0, // cusd 估值
              eusdValuation: 0, // eusd 估值
              freezeCount: toFixed(rexBalance - Number(this.canBuyRexNum), 4), // 冻结
              gotoTrade: [{ symbol: 'eosio-rex-eos', symbolId: -1 }], // 去交易的币种
              imageUrl: '',
              name: 'REX',
              usableCount: toFixed(toNonExponential(Number(amount)), 4), // 余额
              usableEosValuation: toFixed(toNonExponential(Number(rexBalance) * Number(this.rexPrice)), 4), // 可用EOS估值
              cusdEnable: 0,
              eusdEnable: 0,
              usdtEnable: 0,
            }
            this.totalValuation = Number(eosValuation) + Number(this.totalValuation);
            const rexIndex = this.coinInfoList.findIndex(v => v.name === 'REX');
            if (rexIndex !== -1) {
              this.$set(this.coinInfoList, rexIndex, item);
            }
          })
        }
      });
    },

    // dfuse接口获取余额
    async handleGetDfuse() {
      // const userName = this.scatter.identity.accounts[0].name;
      // const accountsArr = [];
      // const coinListForEos = JSON.parse(this.coinListForEos);
      // coinListForEos.forEach((item) => {
      //   accountsArr.push(item.contract)
      // });
      // const accounts = accountsArr.join('|');
      // const url = 'https://mainnet.eos.dfuse.io/v0/state/tables/accounts';
      // const token = await this.handleGetDfuseApiToken();
      // // if (!token) return;
      // const params = {
      //   accounts,
      //   scope: userName,
      //   table: 'accounts',
      //   json: true,
      // }
      // const headers = {
      //   authorization: `Bearer ${token}`
      // }
      // const dfuseApi = await axios.get(url, {
      //   params,
      //   headers,
      // });
      // let balanceArr = []
      // if (dfuseApi.status === 200) {
      //   balanceArr = await this.handleDealDfuseData(dfuseApi.data.tables || []);
      // }
      // return balanceArr;
    },

    // dfuse接口获取余额 所需要的Token
    async handleGetDfuseApiToken() {
      const dfuseToken = await this.$http.get('/common/getDfuseApiToken');
      if (dfuseToken && dfuseToken.code === 0) {
        return dfuseToken.token;
      }
      return '';
    },

    // Eos链dfuse接口返回的数据
    handleDealDfuseData(data) {
      const newData = data;
      const arr = [];
      newData.forEach((item) => {
        item.rows.forEach((v) => {
          const balanArr = v.json.balance.split(' ');
          const add = {
            amount: balanArr[0],
            contract: item.account,
            currency: balanArr[1],
          }
          arr.push(add);
        });
      });
      return arr;
    },

    // 设置账户名
    handleSetAccount() {
      this.setAccountVisible = true;
    },
    // 设置账户名 监听关闭
    lisenSetAccount() {
      this.setAccountVisible = false;
    },

    // NDX抵押数stake
    handleGetStakexInfo() {
      if (this.$appName !== 'eosNewdex') return;
      const params = {
        name: 'stake',
        actor: 'account',
        chain: this.chain
      }
      EosModel.newdexStakexInfo(params, (res) => {
        if (res && res.rows && res.rows.length > 0) {
          this.myStakeNdxALL = (Number(res.rows[0].staked_to_others) + Number(res.rows[0].self_staked)) / 10000;
          this.selfStaked = Number(res.rows[0].self_staked) / 10000;
        }
      });
    },

    // 获取会员banner图
    handleGetMemberImg() {
      if (this.$appName === 'tronNewdex') {
        // this.handleGetTronBanner();
        return;
      }
      this.$http.post('/levelRule/getVipImage').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.vipImageUrl = res.vipImageUrl;
      });
    },
    // 波场banner
    handleGetTronBanner() {
      this.language = this.$store.state.app.language;
      const linkUrl = getReqUrl();
      axios({
        method: 'post',
        url: `${linkUrl}/api/levelRule/getVipImage`,
        headers: {
          chain: 'tron',
          channel: 'web',
          language: this.language,
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then((res) => {
        const result = res.data;
        this.vipImageUrl = result.vipImageUrl;
      })
    },
    // 获取账户信息
    handleGetInfo() {
      if (!this.$store.state.app.accountRes) return;
      const res = this.$store.state.app.accountRes;
      this.eosBalance = '0.0000 EOS';
      if (res.balance) {
        this.eosBalance = res.balance;
      }
    },

    // 刷新
    handleForCoinList(type, valuation) {
      if (type === 'refresh') {
        this.handleGetCoinInfoList();
      }
      if (type === 'valuation') {
        this.totalValuation = valuation;
      }
    },

    // 切换
    handleChangeAccount() {
      // 其他钱包切换账户操作
      this.$emit('listenWalletLogin', true);
    },

    handleToFixed(num, p) {
      return toFixed(num, p);
    },

    // 将科学计数法转换为小数
    toNonExponential(num) {
      if (num === null || isNaN(num)) return 0;
      var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/); // eslint-disable-line
      return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
    },
    // 显示EOS账户信息
    handleShowInfo() {
      this.showInfo = !this.showInfo;
    },

    // 轉賬頁面
    handleToTransFerAccount() {
      this.$router.push({ name: 'transferAccounts' });
    },

    // 去交易提醒
    handleToRemind() {
      this.$router.push('/remind');
    },

    // 菜单跳转
    handleToNavView(name) {
      this.$router.push({
        name,
      });
    },

    // 获取VIP - Logo
    handleGetVipLogo() {
      return vipLogo()
    },

    // 获取钱包的logo
    handleGetWalletLogo() {
      return walletsLogo();
    },

    // 交易环境
    handleExchangeScience() {
      const env = process.env.NODE_ENV;
      let Science = 'EOS';
      switch (env) {
        case 'development':
          Science = 'SYS'
          break;
        case 'production':
          Science = 'EOS';
          break;
        default:
          Science = 'EOS';
          break;
      }
      this.symbolScience = Science;
    },
    // 选择历史搜索
    handleSelectHistory(item, index) {
      if (this.isClick) {
        this.isClick = false;
        this.historyVisible = false;
        this.coinConfig.searched = item;
        this.historyList.splice(index, 1);
        this.historyList.unshift(item);
        localStorage.setItem('historyData', JSON.stringify(this.historyList));
        setTimeout(() => {
          this.isClick = true;
        }, 500);
      }
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    // 估值单位格式化
    handleGuzhiForMat() {
      return guzhiForMat(this.chain);
    },
    // 获取区块浏览器前缀
    // GetChainHref(chain) {
    //   return GetChainHref(chain);
    // },
    handleHref() {
      const name = this.scatter.identity.accounts[0].name;
      if (this.chain === 'enu' || this.chain === 'fibos') {
        this.jumpHref = `${GetChainHref(this.chain)}/accounts/${name}`;
        return;
      }
      if (this.chain === 'tron') {
        this.jumpHref = `https://tronscan.org/#/address/${name}`
        return;
      }
      this.jumpHref = `${GetChainHref(this.chain)}/account/${name}`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/variables.scss';

$vipColor: #E7CC8E;
$bordr: #E5BC7E;
$noVipBg: #50B1E5;
$noVipColor: rgb(241, 244, 254);
.redColor {
  color: #EE1443 !important;
}

.orangeColor {
  color: #FF9800 !important;
}

.greenColor {
  color: #67C269 !important;
}

.redBack {
  background: #EE1443 !important;
}

.orangeBack {
  background: #FF9800 !important;
}

.greenBack {
  background: #67C269 !important;
}

.content{
  .inblo {
    display: inline-block;
    padding: 0 !important;
  }

  .pd8px{
    padding-top: 8px;
  }

  .gray{
    color: #999;
  }

  .mainView{
    color: rgba(0, 0, 0, .8);
    width: $-min-width;
    min-height: 600px;
    margin: 20px auto;

    .box{
      position: relative;
      box-shadow: 0px 0px 8px #ddd;

      .bannerImg {
        position: absolute;
        right: 0;
        top: 0;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 551px;
        height: 276px;
        cursor: pointer;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }

    .topUrl{
      padding-bottom: 10px;
    }

    .showInfo{
      display: flex;
      padding: 10px 0px;
      background: #fff;
      position: relative;
      height: 61px;
      // box-shadow: 0px 5px 8px #ddd;

      // &::before{
      //   content: '';
      //   display: inline-block;
      //   border: 10px solid rgba(255, 255, 255, 1);
      //   border-bottom: 10px solid transparent;
      //   border-right: 10px solid transparent;
      //   position: absolute;
      //   top: -10px;
      //   right: 50px;
      //   transform: rotate(45deg);
      // }

      .ft12{
        font-size: 12px;
      }
      .showInfoItem{
        &.redColor {
          color: #EE1443;
        }
        &.orangeColor {
          color: #FF9800;
        }
        &.greenColor {
          color: #67C269;
        }
        flex: 1;
        position: relative;
        text-align: center;
        i {
            display: inline-block;
            font-size: 15px;
            cursor: pointer;
        }
        .close{
          position: absolute;
          cursor: pointer;
          right: 0px;
          bottom: -10px;
          color: rgba(255, 255, 255, .8);
          background: rgba(0, 0, 0, .3);
          font-size: 22px;

          &:hover{
            box-shadow: 0px 0px 5px rgba(0, 0, 0, .3);
            background: rgba(255, 0, 0, .6);
          }
        }
      }
    }

    .topInfo{
      // box-shadow: 0 0 30px #dddddd;
      background: rgba(255, 255, 255, .8) url('../../assets/img/wallet/bg-walletData.png') no-repeat;
      // background: linear-gradient(to right, #565656 , #2a2a2a);
      background-size: 105% 105%;
      background-position: -5px -10px;
      padding: 20px;
      min-height: 276px;

      .accountSet{
        font-weight: normal;
        color: #3F99DC;
        padding: 0px 0px 0px 10px;
        font-size: 14px;
      }

      .pl15{
        padding-left: 15px;
      }

      .icon{
        font-size: 16px;
        // border-radius: 50%;
        width: 30px;
        height: 30px;
        // margin-left: 47px;
        text-align: center;
        overflow: hidden;
        top: 20px;
        // position: absolute;

        img {
          display: block;
          width: 22px;
          // height: 100%;
        }
      }

      .memberIcon {
        padding-left: 58px;
      }

      .title{
        // font-weight: bold;
        font-size: 18px;
        display: inline-block;
        height: 30px;
        position: relative;
        top: 0px;
        line-height: 30px;
        // cursor: pointer;

        span {
          vertical-align: middle;
        }
      }

      .lv{
        color: rgb(255, 152, 0);
      }

      .showDetailData{
        float: right;
        margin-top: 20px;
        line-height: 40px;
        color: #3F99DC;
        a:last-child{
          padding-left: 15px;
        }
      }

      div{
        position: relative;
        padding: 10px;
      }

      .sum{
        font-size: 22px;
        font-weight: normal;
        padding: 0px 10px;
        color: rgba(0, 0, 0, 0.7);
        margin-bottom: 20px;

        .money-eos{
          padding-left: 50px;
          font-size: 30px;
        }

        .money-right{
          padding-left: 0px;
          font-size: 22px;
        }
      }

      .VariousBalance {
        padding: 10px 0 0 60px;
      }

      .tip{
        padding-left: 60px;
        color: #999;
      }

      .remind-btn {
        color: #278EDA;
        margin-right: 20px;
        cursor: pointer;
        i {
          font-size: 20px;
          margin-top: 3px;
          margin-right: 4px;
        }
      }

      .btn{
        margin: 15px 10px 15px 60px;
        min-width: 120px;
        font-size: 14px;
        background: transparent;
        color: #278EDA;
        font-weight: normal;
      }

      .btn.hover{
        color: white;
        background: #278EDA;
      }

      .btn-last{
        margin: 15px 10px;
      }

      .add{
        font-weight: bold;
      }
    }

    .backDetail{
      line-height: 40px;
      color: #3F99DC;
    }
  }
}

.icon-arrow-down {
  color: #999;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 -1px 2px;
  cursor: pointer;
}

.userPull {
  .loginList {
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(246, 246, 246, 1);
  }
  .loginList:nth-child(2) {
    margin-bottom: 0 !important;
  }
}
.padding-none {
  padding: 0 !important;
}
// 弹出框样式
.innerTools{
  .item{
    text-align: center;
    line-height: 30px;
  }
}
// dialog 样式
.dialog{
  /deep/ .el-dialog{
    background: url('../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 40px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}

// 隐藏账户背景样式
.title{
  background: transparent;

  /deep/ .el-input__inner{
    color: rgba(0, 0, 0, .8);
    font-size: 16px;
    background: transparent;
  }

  /deep/ .el-select__caret{
    color: black;
  }
}

.el-icon-arrow-down {
  outline: none;
  margin-left: 0;
}

.roterView {
  box-shadow: 0px 0px 8px #dddddd;
  background: rgba(255, 255, 255, .8);

  .router-nav {
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);

    .navside {
      position: relative;
      margin-right: 30px;
      position: relative;

      i.iconfont {
        margin-top: -1px;
      }

      &.active::before {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3px;
        background: $noVipBg;
        bottom: -21px;
        left: 0;
        right: 0;
        margin: auto;
      }

      &:hover,
      &:hover /deep/ .el-dropdown-link,
      &.active,
      &.active /deep/ .el-dropdown-link {
        cursor: pointer;
        color: $noVipBg
      }

      .questionMark {
        position: absolute;
        right: -5px;
        top: 2px;
        color: #999;

        .markTooltip {
          font-size: 16px;
        }
      }
    }

    // .navside:first-child {
    //   &.active::before {
    //     display: none;
    //   }
    // }
  }
}
.capitalRecord {
  cursor: pointer;
  vertical-align: middle;
  margin-top: 3px;
}
// vip会员样式
.vipContent {
  .capitalRecord {
    color: $vipColor;
  }

  .icon-arrow-down {
    color: #fff;
  }

  .topInfo{
    background: linear-gradient(to right, #565656 , #2a2a2a) !important;
  }

  .account, .tip, .money-eos, .money-right, .jumpBtn {
    color: $vipColor !important;
  }

  .inblo {
    color: #fff;
  }

  .navside {
    &.active::before {
      background: $bordr !important;
    }

    &:hover,
    &:hover /deep/ .el-dropdown-link,
    &.active,
    &.active /deep/ .el-dropdown-link {
      color: $bordr !important;
    }
  }
}

.Influencer {
  .topInfo{
    background: linear-gradient(to bottom, #333d61 , #1b203a) !important;
  }
  .sum, .account, .balanceList {
    color: rgba(255, 255, 255, .8) !important;
  }
}

.setAccountNameDialog {
  /deep/ .el-dialog__header {
    padding-top: 35px;
  }
}

// 主图样式
.theme-1B1D27{
  .content{
    .mainView{
      color: rgba(255, 255, 255, .8);

      .roterView {
        background: $-black1;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, .4);
      }

      .account, .money-eos {
        color: rgba(255, 255, 255, .8);
      }

      .money-right {
        color: hsla(0,0%,100%,.8)
      }

      .box{
        // box-shadow: 0 0 8px rgba(0, 0, 0, .3);
        box-shadow: none;
      }

      .showInfo{
        background: $-black1;
        color: rgba(255, 255, 255, .8);
      }

      .topInfo{
        background: rgb(21, 34, 71);

        .btn{
          color: #fff;
          box-shadow: 0 0 0 #000000;
          background: $-btn-skyblue;
        }
      }

      .inblo {
        color: rgba(255, 255, 255, .8);
      }

      .topUrl{
        /deep/ .el-breadcrumb__inner{
          color: rgba(255, 255, 255, .8);
        }
      }
    }
  }

  .vipContent {
    .topInfo {
      background: rgb(21, 34, 71) !important;
    }
  }

  .userPull {
    .loginList {
      border-color: rgba(255, 255, 255, .018);;
    }
  }

  .Influencer {
    .topInfo{
      background: linear-gradient(to bottom, #333d61 , #1b203a) !important;
    }
  }
}
</style>
